<template>
<v-touch @swiperight="handleSwipeRight" style="height:100%">
  <div style="margin-top:35px;background:#f5f5f5" v-if="columnlist">
    <img :src="banner" alt="" style="width:100%">
    <ul>
      <list v-for="data in columnlist" :key="data.id" :data="data"  @click.native="handleClick(data)"></list>
    </ul>
    <div class="more">
        <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.lukou.youxuan&ckey=CK1362065872812">
        <span class="download">去熊猫优选APP，看更多商品</span>
        </a>
    </div>
    <footer>
      <img src="http://static.anquan.org/static/outer/image/aqkx_83x30.png?id=www.xiongmaoyouxuan.com?t=1" alt="">
    </footer>
  </div>
  </v-touch>
</template>
<script>
import axios from 'axios'
import list from '@/views/category/list'
export default {
  data () {
    return {
      banner: '',
      columnlist: null,
      loaddata: 0,
      loadstatus: true,
      scrollHeight: '0px'
    }
  },
  components: {
    list
  },
  mounted () {
    axios.get(`http://www.xiongmaoyouxuan.com/api/column/${this.$route.params.columnid}`).then(res => {
      // console.log(res.data.data.cover)
      this.banner = res.data.data.cover
    })
    axios.get(`http://www.xiongmaoyouxuan.com/api/column/${this.$route.params.columnid}/items?start=0`).then(res => {
      // console.log(res.data.data.list)
      this.columnlist = res.data.data.list
    })
    window.addEventListener('scroll', this.loadmore)
  },
  methods: {
    handleSwipeRight () {
      this.$router.back() // 右滑返回
    },
    handleClick (data) {
      this.$router.push(`/c/${data.id}`)
    },
    async loadmore () { // 滚动加载更多
      var height = document.documentElement.scrollTop + document.documentElement.clientHeight -
      document.documentElement.scrollHeight
      if (height >= -50 && this.loadstatus && height !== 0) {
        this.loadstatus = false
        this.loaddata += 20
        await axios.get(`http://www.xiongmaoyouxuan.com/api/column/${this.$route.params.columnid}/items?start=${this.loaddata}`).then(res => {
          this.columnlist = this.columnlist.concat(res.data.data.list)
          console.log(res.data.data.list)
          this.$nextTick(() => {
            this.loadstatus = true
          })
        })
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.loadmore)
  }

}
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.more{
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;

.download{
  border: 1px solid #fa521e;
  padding: 10px;
  border-radius: 20px;
  color:#fa521e;
  position: relative;
  font-size: 14px;

}
 }
 footer{
   width: 100%;
   height: 50px;
   line-height: 50px;
   text-align: center;
   position: relative;
   background: #fff;
   img{
     margin-top: 10px;
   }
 }
</style>
